<template>
  <div id="player">
    <audio id='audio' autoplay="autoplay" :src="playUrl"></audio>
    <div class="history" :class="[ hide ? 'hide_list' : 'show_list']">
      <ul>
        <li>播放历史</li>
        <li v-for="(item, index) in nameList" :key="index" @click="playHistory(list[index])">{{ item }}</li>
      </ul>
    </div>
    <div class="song_content">
      <div class="song_img">
        <img :src="coverImg" alt="封面">
      </div>
      <div class="song_detail">
        <p>{{ songName }}</p>
        <p>{{ singer }}</p>
      </div>
    </div>
    <div class="play_ctrl">
      <span class="iconfont icon-icon-1" @click="toggle"></span>
      <span class="iconfont icon-icon-4" @click="pause"></span>
      <span class="iconfont icon-icon-3" @click="nextOne"></span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Player',
    data () {
      return {
        playUrl: '',
        coverImg: 'xxx',
        songName: '歌曲...',
        singer: '歌手...',
        hide: true,
        list: [],
        nameList: [],
        stop: false,
        songUrl: ''
      }
    },
    created: function () {
      let that = this
      this.$root.eventHub.$on('click', () => {
        let hash = that.$store.state.hash
        that.$ajax.get(`api/app/i/getSongInfo.php?cmd=playInfo&hash=${hash}`).then((res) => {
          if (res.status !== 200) {
            console.error('获取歌曲播放地址失败')
          } else {
            let data = res.data
            let songName = data.songName
            let singer = data.singerName
            let coverImg = data.imgUrl
            that.singer = singer
            that.songName = songName
            that.coverImg = coverImg
            let songUrl = data.url
            that.playUrl = songUrl
            that.stop = false
          }
        })
        let list = that.$store.state.list
        let nameList = that.$store.state.nameList
        that.list = list
        that.nameList = nameList
      })
    },
    methods: {
      toggle: function () {
        this.hide = !this.hide
      },
      pause: function () {
        let el = this.$el.querySelector('#audio')
        let isStop = this.stop
        if (isStop) {
          this.stop = !this.stop
          el.play()
        } else {
          this.stop = !this.stop
          el.pause()
        }
      },
      playHistory: function (arg) {
        let hash = arg
        let that = this
        this.$store.commit('change', hash)
        that.$ajax.get(`api/app/i/getSongInfo.php?cmd=playInfo&hash=${hash}`).then((res) => {
          if (res.status !== 200) {
            console.error('获取歌曲播放地址失败')
          } else {
            let data = res.data
            let songUrl = data.url
            that.playUrl = songUrl
            that.stop = false
          }
        })
      },
      nextOne: function () {
        let that = this
        let listH = this.list
        let hash = this.$store.state.hash
        let Index = 0
        for (var i = 0, len = listH.length; i < len; i++) {
          if (listH[i] === hash) {
            Index = i
          }
        }
        let chose = listH[Index + 1]
        if (!chose) {
          chose = listH[0]
        }
        this.$ajax.get(`api/app/i/getSongInfo.php?cmd=playInfo&hash=${chose}`).then((res) => {
          if (res.status !== 200) {
            console.error('获取歌曲播放地址失败')
          } else {
            let data = res.data
            let songUrl = data.url
            that.playUrl = songUrl
            that.stop = false
          }
        })
      }
    },
    updated: function () {
      this.$router.push('/')
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/scss/mixin";
  #player {
    z-index: 20;
    background-color: #fff;
    width: 100%;
    height: pxTorem(65);
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    .song_content {
      display: flex;
      align-items: center;
      .song_img {
        width: pxTorem(53);
        height: pxTorem(53);
        border: 1px solid #ccc;
        margin-left: pxTorem(8);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .song_detail {
        padding-left: pxTorem(10);
        p {
          padding: pxTorem(5);
        }
      }
    }
    .play_ctrl {
      margin-right: pxTorem(10);
      span {
        font-size: pxTorem(26);
        margin-left: pxTorem(10);
      }
    }
    .history {
      position: absolute;
      bottom: pxTorem(65);
      background-color: #eee;
      width: 100%;
      max-height: pxTorem(200);
      overflow: auto;
      ul {
        width: 100%;
        overflow: hidden;
        li {
          padding-left: pxTorem(10);
          border-bottom: 1px solid #ccc;
          height: pxTorem(50);
          line-height: pxTorem(50);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  @keyframes show {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }
  .show_list {
    display: block;
    animation: show 0.5s;
    -weblit-animation: show 0.5s;
  }
  .hide_list {
    display: none;
  }
</style>
